---
title: Giao diện Tùy chỉnh
description: Tạo giao diện tùy chỉnh
---

# Giao diện Tùy chỉnh

## Tạo giao diện tùy chỉnh

> Lưu ý: API này chưa ổn định và có khả năng sẽ thay đổi trong tương lai gần. Chúng tôi khuyên bạn nên sử dụng [giao diện tích hợp](/docs/theming) cho bây giờ.

Mặc dù các giao diện tích hợp cung cấp một số mức độ tùy chỉnh, loại `Theme` được cung cấp để giúp bạn xác định giao diện tùy chỉnh của riêng mình với quyền truy cập cấp thấp hơn vào các biến giao diện cơ bản.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### Mở rộng một giao diện tích hợp

Bạn có thể mở rộng một giao diện tích hợp mà không cần định nghĩa lại toàn bộ giao diện. Điều này hữu ích khi bạn chỉ muốn ghi đè các token giao diện cụ thể.

Để làm điều đó, hãy cài đặt `lodash.merge` (hoặc tương đương):

```bash
npm install lodash.merge
```

Nhập nó, cùng với giao diện bạn muốn mở rộng (ví dụ: `darkTheme`) và loại `Theme` của TypeScript:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

Sau đó, kết hợp giao diện tích hợp, với các token giao diện bạn muốn ghi đè. Trong ví dụ này, tôi đang ghi đè token `accentColor` để hợp với màu sắc chính của thương hiệu của tôi.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

Cuối cùng, bạn có thể truyền giao diện tùy chỉnh của mình tới prop `theme` của `RainbowKitProvider`.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Tạo các bộ chọn giao diện tùy chỉnh

Nếu ứng dụng của bạn được render trên máy chủ/tĩnh và cho phép người dùng chuyển đổi giữa các giao diện bằng tay, hệ thống theming của RainbowKit có thể kết nối với các bộ chọn CSS tùy chỉnh với các chức năng sau đây có thể được sử dụng với bất kỳ hệ thống CSS-in-JS nào:

- `cssStringFromTheme`
- `cssObjectFromTheme`

Các chức năng này trả lại CSS thiết lập tất cả biến giao diện cần thiết. Bởi vì cả chuỗi và đối tượng đều được hỗ trợ, điều này có thể tích hợp với bất kỳ hệ thống CSS-in-JS nào.

Như một ví dụ cơ bản, bạn có thể render phần tử `style` của riêng bạn với các bộ chọn tùy chỉnh cho mỗi giao diện. Vì chúng tôi đang kiểm soát việc render CSS của giao diện, chúng tôi đang truyền `null` cho prop `theme` để RainbowKitProvider không render bất kỳ kiểu dáng nào cho chúng tôi. Cũng lưu ý việc sử dụng tùy chọn extends trên hàm cssStringFromTheme, nó loại bỏ bất kỳ biến giao diện nào giống như giao diện gốc.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
